<template>
  <div class="login_wrapper">
    <div class="logo">
      <img src="@/assets/images/logo.png" />
    </div>
    <form class="loginForm" v-if="loginWay">
        <section class="input_container phone_number">
            <input type="text" placeholder="手机号码" name="phone" maxlength="11" v-model="phoneNumber">
            <button @click.prevent="getVerifyCode" :class="{right_phone_number: rightPhoneNumber}" v-show="!computedTime">获取验证码</button>
            <button @click.prevent v-show="computedTime">已发送({{computedTime}}s)</button>
        </section>
        <section class="input_container">
            <input type="text" placeholder="验证码" name="mobileCode" maxlength="6" v-model="mobileCode">
        </section>
    </form>
    <form class="loginForm" v-else>
      <section class="input_container">
        <input type="text" placeholder="手机号/邮箱/用户名" v-model.lazy="userAccount">
      </section>
      <section class="input_container">
        <input v-if="!showPassword" type="password" placeholder="密码" v-model="passWord">
        <input v-else type="text" placeholder="密码" v-model="passWord">
        <div class="button_switch" :class="{change_to_text: showPassword}" @click="changePassWordType">
          <div class="circle_button" :class="{trans_to_right: showPassword}"></div>
          <span>abc</span>
          <span>...</span>
        </div>
      </section>
      <section class="input_container captcha_code_container">
        <input type="text" placeholder="验证码" maxlength="4" v-model="codeNumber">
        <div class="img_change_img">
          <img v-show="captchaCodeImg" :src="captchaCodeImg" @click="getCaptchaCode">
          <div class="change_img" @click="getCaptchaCode">
            <p>看不清</p>
            <p>换一张</p>
          </div>
        </div>
      </section>
    </form>
    <div class="login_tips">
      <p>温馨提示：未注册过的账号，登录时将自动注册</p>
      <p>注册过的用户可凭账号密码登录</p>
    </div>
    <div class="login_container" @click="mobileLogin">登录</div>
    <div class="change_login" @click="changeLoginWay">{{loginWay? "密码登录":"短信登录"}}</div>
    <router-link to="/forget" class="to_forget">忘记密码？</router-link>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant'
import { mapMutations } from 'vuex'

export default {
  name: 'Login',
  data () {
    return {
      loginWay: false, // 登录方式，默认短信登录
      showPassword: false, // 是否显示密码
      phoneNumber: null, // 电话号码
      mobileCode: null, // 短信验证码
      validate_token: null, // 获取短信时返回的验证值，登录时需要
      computedTime: 0, // 倒数记时
      userInfo: null, // 获取到的用户信息
      userAccount: null, // 用户名
      passWord: null, // 密码
      captchaCodeImg: null, // 验证码地址
      codeNumber: null, // 验证码
      alertText: null // 提示的内容
    }
  },
  created () {
    this.getCaptchaCode()
  },
  computed: {
    // 判断手机号码
    rightPhoneNumber: function () {
      return /^1\d{10}$/gi.test(this.phoneNumber)
    }
  },
  methods: {
    ...mapMutations(['RECORD_USERINFO']),
    // 改变登录方式
    changeLoginWay () {
      this.loginWay = !this.loginWay
    },
    // 是否显示密码
    changePassWordType () {
      this.showPassword = !this.showPassword
    },
    // 获取验证吗，线上环境使用固定的图片，生产环境使用真实的验证码
    async getCaptchaCode () {
      let res = await this.$api.home.getcaptchas()
      this.captchaCodeImg = res.data.code
    },
    // 获取短信验证码
    async getVerifyCode () {
      if (this.rightPhoneNumber) {
        this.computedTime = 60
        // 倒计时
        this.timer = setInterval(() => {
          this.computedTime--
          if (this.computedTime === 0) {
            clearInterval(this.timer)
          }
        }, 1000)
        // 判读用户是否存在
        // let exsis = await this.$api.home.checkExsis(this.phoneNumber, 'mobile')
        // if (exsis.data.message) {
        //   Dialog.alert({
        //     message: exsis.data.message
        //   })
        //   return true
        // }
        // if (!exsis.data.isexists) {
        //   Dialog.alert({
        //     message: '您输入的手机号尚未绑定'
        //   })
        //   return false
        // }
        // 发送短信验证码
        let res = await this.$api.home.mobileCode(this.phoneNumber)
        if (res.data.message) {
          Dialog.alert({
            message: res.data.message
          })
          return
        }
        this.validate_token = res.data.validate_token
      }
    },
    // 发送登录信息
    async mobileLogin () {
      if (this.loginWay) {
        if (!this.rightPhoneNumber) {
          Dialog.alert({
            width: '70%',
            message: '手机号码不正确'
          })
          return
        } else if (!(/^\d{6}$/gi.test(this.mobileCode))) {
          Dialog.alert({
            width: '70%',
            message: '短信验证码不正确'
          })
          return
        }
        // 手机号登录
        let mobileLoginRes = await this.$api.home.sendLogin(this.mobileCode, this.phoneNumber, this.validate_token)
        this.userInfo = mobileLoginRes.data
      } else {
        if (!this.userAccount) {
          Dialog.alert({
            width: '70%',
            message: '请输入手机号/邮箱/用户名'
          })
          return
        } else if (!this.passWord) {
          Dialog.alert({
            width: '70%',
            message: '请输入密码'
          })
          return
        } else if (!this.codeNumber) {
          Dialog.alert({
            width: '70%',
            message: '请输入验证码'
          })
          return
        }
        // 用户名登录
        let userAccountRes = await this.$api.home.accountLogin(this.userAccount, this.passWord, this.codeNumber)
        this.userInfo = userAccountRes.data
      }
      // 如果返回的值不正确，则弹出提示框，返回的值正确则返回上一页
      if (!this.userInfo.user_id) {
        Dialog.alert({
          message: this.userInfo.message
        })
        if (!this.loginWay) this.getCaptchaCode()
      } else {
        Toast({
          message: '登录成功',
          duration: 1000,
          onClose: () => {
            this.RECORD_USERINFO(this.userInfo)
            this.$router.go(-1)
          }
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .login_wrapper
    padding: 0.8rem .5rem 0
    pst(0, 0, 0, 0)
    .logo
      height: 1.1rem
      text-align: center
      img
        height: 1.1rem
    .loginForm
      background-color: #fff
      margin-top: .3rem
      .input_container
        display: flex
        justify-content: space-between
        padding: .3rem .2rem
        border-bottom: 1px solid #f1f1f1
        input
          sc(.30rem, #666)
        button
          sc(.16rem, #fff)
          font-family: Helvetica Neue,Tahoma,Arial
          padding: .2rem .3rem
          border: 1px
          border-radius: 0.05rem
        .right_phone_number
          background-color: #4cd964
    .phone_number
      padding: .15rem .4rem
    .captcha_code_container
      .img_change_img
        display: flex
        align-items: center
        img
          wh(1.2rem, 0.5rem)
          margin-right: .1rem
        .change_img
          display: flex
          flex-direction: 'column'
          flex-wrap: wrap
          width: 1rem
          justify-content: center
          p
            sc(.24rem, #666)
          p:nth-of-type(2)
            color: $blueTextColor
    .login_tips
      sc(.26rem, #f00)
      padding .2rem 0
      line-height: .4rem
      a
        color: #3b95e9
    .login_container
      margin: .2rem 0 .3rem
      sc(.35rem, #fff)
      background-color: #4cd96f
      padding: .20rem 0
      border: 1px
      border-radius: 0.05rem
      text-align: center
    .button_switch
      background-color: #ccc
      display: flex
      justify-content: center
      wh(.6rem, .4rem)
      padding: 0 .12rem
      border-radius: 0.5rem
      position: relative
      .circle_button
        transition: all .3s
        position: absolute
        top: -.06rem
        left: 0
        z-index: 1
        wh(.5rem, .5rem)
        box-shadow: 0 .01rem 0.053333rem 0 rgba(0,0,0,.1)
        background-color: #f1f1f1
        border-radius: 50%
      .trans_to_right
        transform: translateX(.4rem)
      span
        sc(.24rem, #fff)
        transform: translateY(.025rem)
        line-height: .35rem
      span:nth-of-type(2)
        transform: translateY(-.04rem)
    .change_to_text
      background-color: #4cd964
    .change_login
      float: left
      sc(.3rem, #666)
    .to_forget
      float: right
      sc(.3rem, #3b95e9)
</style>
